<template>
  <div class="layout">
    <Sidebar />
    <div class="regulator-container">
      <a-card class="box-card">
        <template #title>
          <span>监管机构管理</span>
        </template>

        <!-- 待审批项目列表 -->
        <a-card class="section-card">
          <template #title>
            <span>待审批项目列表</span>
          </template>
          <a-table
              :columns="pendingColumns"
              :data-source="pendingProjects"
              :loading="isLoadingPending"
              row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'">
                <a-button type="primary" @click="approveProject(record.id)">批准</a-button>
              </template>
            </template>
          </a-table>
        </a-card>

        <!-- 项目审批 -->
        <a-card class="section-card">
          <template #title>
            <span>审批项目</span>
          </template>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="项目ID">
              <a-input v-model:value="projectId" placeholder="请输入项目ID" />
              <template #extra>
                <a-button type="primary" @click="approveProject(projectId)" :disabled="!projectId">
                  批准项目
                </a-button>
              </template>
            </a-form-item>
          </a-form>
        </a-card>
      </a-card>
    </div>
  </div>
</template>
<script>
import { message } from 'ant-design-vue';
import axios from 'axios';
import Sidebar from '../components/Siderbar.vue';

export default {
  name: 'the-Regulator',
  components: {
    Sidebar
  },
  data() {
    return {
      projectId: '',
      pendingProjects: [], // 待审批项目列表
      isLoadingPending: false, // 待审批项目加载状态
      pendingColumns: [
        {
          title: '项目ID',
          dataIndex: 'projectId',
          key: 'projectId'
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          key: 'projectName'
        },
        {
          title: '项目描述',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '受益人地址',
          dataIndex: 'beneficiary',
          key: 'beneficiary'
        },
        {
          title: '目标金额',
          dataIndex: 'targetAmount',
          key: 'targetAmount'
        },
        {
          title: '已筹金额',
          dataIndex: 'raisedAmount',
          key: 'raisedAmount'
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          key: 'createdAt'
        }

      ]
    };
  },
  methods: {
    async approveProject(projectId) {
      try {
        await axios.post(`/api/regulator/project/${projectId}/approve`);
        message.success('项目审批成功');
        this.projectId = '';
        this.fetchPendingProjects(); // 刷新待审批项目列表
      } catch (error) {
        message.error('项目审批失败：' + error.message);
      }
    },
    async fetchPendingProjects() {
      try {
        this.isLoadingPending = true;
        const response = await axios.get('/api/regulator/project/getPendingProjects');
        if (response.data) {
          this.pendingProjects = response.data;
        }
      } catch (error) {
        message.error('获取待审批项目失败：' + error.message);
      } finally {
        this.isLoadingPending = false;
      }
    }
  },
  mounted() {
    // 页面加载时获取待审批项目列表
    this.fetchPendingProjects();
  }
};
</script>
<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
}

.regulator-container {
  padding: 20px;
  flex: 1;
  margin-left: 256px; /* 修改为与侧边栏宽度相同 */
}

.section-card {
  margin-bottom: 20px;
}

.ant-form-item-extra {
  margin-top: 10px;
}

/* 添加一些额外的样式美化 */
.box-card {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-card {
  border-radius: 4px;
}

.ant-form-item {
  margin-bottom: 24px;
}

.ant-button {
  height: 32px;
  padding: 0 16px;
}

/* 待审批项目表格样式 */
.ant-table {
  margin-top: 20px;
}

.ant-table-thead > tr > th {
  background-color: #f9f9f9;
  font-weight: 500;
}
</style>